<template>
  <div class="DateSearchList">
    <div
      v-for="item in list"
      :key="item.id"
      :class="selectId === item.id ? 'selectStyle' : 'defalutStyle'"
      @click="CilckDateSearchItem(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['level'],
  // watch: {
  //   level() {
  //     alert(1)
  //   }
  // },
  data() {
    return {
      list: [
        { id: '1', name: '日' },
        { id: '2', name: '月' },
        { id: '3', name: '年' }
      ],
      selectId: ''
    }
  },
  created() {
    this.selectId = this.level ? this.level : 3
  },
  methods: {
    CilckDateSearchItem(item) {
      if (item.id === this.selectId) return

      this.selectId = item.id
      this.$emit('switchPeriod', item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.DateSearchList {
  display: flex;
  justify-content: space-around;
  // width: 140px;
  height: 30px;
  font-size: 14px;
  border-radius: 6px;
  padding: 2px;
  color: #bec1cf;
  background: $select-color;
  div {
    line-height: 26px;
    border-radius: 6px;
    width: 40px;
    height: 26px;
    text-align: center;
    &.selectStyle {
      background-color: $main-blue;
      color: #fff;
    }
  }
}
</style>
